@import "ui-variables";

.git-status-bullet(@color) {
	&:after {
		content: "";
		width: 7px;
		height: 7px;
		float: left;
		position: relative;
		top: 8px;
		left: -13px;
		margin-right: -12px;
		background-color: @color;
		border: 1px solid darken(@color, 7%);
		border-radius: 100%;
	}
}

.git-status-bullet--folder(@color) {
	&:after {
		border-color: @text-color;
		left: 15px;
	}
}

.tree-view {
  background: @tree-view-background-color;
}

.list-group .selected:before,
.list-tree .selected:before {
	height: @height__list-item;
	background: @tree-view-background-color-highlight;
}

// Don’t display git status on project root
.list-item.project-root-header {
	&:after {
		display: none;
	}
}

// Modified file
.list-item,
.header.list-item {
	&.status-modified {
		.git-status-bullet(@text-color-modified);
	}
}

// Added file
.list-item,
.header.list-item {
	&.status-added {
		.git-status-bullet(@text-color-added);
	}
}

// Removed file
.list-item,
.header.list-item {
	&.status-removed {
		.git-status-bullet(@text-color-removed);
	}
}

// Modified folder
.status-modified > .header.list-item {
	.git-status-bullet(@text-color-modified);
	.git-status-bullet--folder(@text-color-modified);
}

// Added folder
.status-added > .header.list-item {
	.git-status-bullet(@text-color-added);
	.git-status-bullet--folder(@text-color-added);
}

// These classes are needed so that different files don’t appear color-coded based on their Git status
// Selected
.list-group li:not(.list-nested-item).selected,
.list-tree li:not(.list-nested-item).selected,
.list-group li.list-nested-item.selected > .list-item,
.list-tree li.list-nested-item.selected > .list-item,
// Selected project root
.project-root li:not(.list-nested-item).selected,
.project-root li.list-nested-item.selected > .list-item,
// Modified
.list-group li.file:not(.list-nested-item).status-modified,
.list-tree li.file:not(.list-nested-item).status-modified,
.list-group li.file.list-nested-item.status-modified > .list-item,
.list-tree li.file.list-nested-item.status-modified > .list-item,
.list-group li.directory:not(.list-nested-item).status-modified,
.list-tree li.directory:not(.list-nested-item).status-modified,
.list-group li.directory.list-nested-item.status-modified > .list-item,
.list-tree li.directory.list-nested-item.status-modified > .list-item,
// Added
.list-group li.file:not(.list-nested-item).status-added,
.list-tree li.file:not(.list-nested-item).status-added,
.list-group li.file.list-nested-item.status-added > .list-item,
.list-tree li.file.list-nested-item.status-added > .list-item,
.list-group li.directory:not(.list-nested-item).status-added,
.list-tree li.directory:not(.list-nested-item).status-added,
.list-group li.directory.list-nested-item.status-added > .list-item,
.list-tree li.directory.list-nested-item.status-added > .list-item,

.expanded.status-modified .header.list-item:before,
.expanded.status-added .header.list-item:before {
	color: @text-color;
}

.list-group li:not(.list-nested-item),
.list-tree li:not(.list-nested-item),
.list-group li.list-nested-item > .list-item,
.list-tree li.list-nested-item > .list-item {
	line-height: @height__list-item;
	text-shadow: none;
}

// Folder is open
.list-tree.has-collapsable-children .list-nested-item > .list-item:before {
	content: "▶" !important;
	font-size: @font-size-small !important;
	transform: rotate(90deg) translate(1px, 2px);
}

// Display collapse/expand arrow in the ignored color
.list-nested-item.status-ignored .list-item:before {
	color: @text-color-ignored !important;
}

// Folder is closed
.list-tree.has-collapsable-children .list-nested-item.collapsed > .list-item:before {
	transform: rotate(0deg);
}
